import { TypeBoxItem } from "@/focus/type"
import { Ref, getCurrentInstance, onMounted, onUnmounted, ref, watch } from "vue"
import { switchStore } from "../../store";
import { getBoundingClientRect } from "@/focus/path/until";
/**监控子组件中的焦点元素  更新焦点元素中的box信息 */
export function watchWidgetList(props: any, uid: Ref<string>, domRef: Ref<HTMLElement | undefined>) {
  const inject = switchStore.inject()
  const context = getCurrentInstance();
  const funs = {
    onMoveIn: () => { },
    onMoveOut: () => { },
    onMove: () => { },
  }

  const cacheWidgetId = ref<string>("")
  const boxInfo: TypeBoxItem = {
    name: "focus-box",
    uid: uid.value,
    ele: domRef.value,
    cacheWidgetId: props.cacheId,
  }
  function findChildComponents(children: any[]) {
    children.forEach((child: any) => {
      if (child.$options.name === 'focus-widget') {
        const _id = child.$el.id
        const _widgetIdx = inject.state.widgetList.findIndex(ev => ev.uid === _id)
        if (_widgetIdx > -1) {
          inject.state.widgetList[_widgetIdx]["boxId"] = boxInfo.uid
          inject.state.widgetList[_widgetIdx]["boxCacheId"] = boxInfo.cacheWidgetId
        }
      }
      const endChildNames = ["focus-switch", "focus-box", "focus-popup"]
      if (child.$children.length > 0 && !endChildNames.find(v => v === child.$options.name)) {
        findChildComponents(child.$children);
      }
    })
  }
  watch([() => props.boxId, () => props.cacheId,], ([boxId, cacheId]) => {
    uid.value = boxId
    cacheWidgetId.value = cacheId
    boxInfo.uid = boxId
    boxInfo.cacheWidgetId = cacheId
    inject.createBox(boxInfo)
    findChildComponents(context?.proxy.$children || [])
  })
  watch(() => cacheWidgetId.value, (cacheId) => {
    boxInfo.cacheWidgetId = cacheId
    inject.createBox(boxInfo)
    findChildComponents(context?.proxy.$children || [])
  })
  watch(() => domRef.value, (ele) => {
    const rect = getBoundingClientRect(domRef.value)
    boxInfo.ele = ele
    boxInfo.rect = rect
    inject.createBox(boxInfo)
  })
  watch(() => inject.state.focusId.value, (_focusId, _oldFocusId) => {
    const widgets = inject.state.widgetList.filter((ev) => {
      return (ev.uid === _focusId || ev.uid === _oldFocusId)
    })
    let _newWidget = widgets[0], _oldWidget = widgets[1]
    if (widgets[1]?.uid === _focusId && widgets[0]?.uid === _oldFocusId) {
      _newWidget = widgets[1], _oldWidget = widgets[0]
    }
    if (_newWidget != null && _newWidget.boxId === uid.value && !props.cacheIdLock) {
      cacheWidgetId.value = _focusId
    }
    if (_newWidget?.boxId === uid.value && _oldWidget?.boxId !== uid.value) {
      funs.onMoveIn()
    } else if (_oldWidget?.boxId === uid.value && _newWidget?.boxId !== uid.value) {
      funs.onMoveOut()
    }
    if (_newWidget?.boxId === uid.value && _oldWidget?.boxId === uid.value) {
      funs.onMove()
    }
  }, { immediate: true })
  const timer: { value?: number } = { value: undefined }
  onMounted(() => {
    inject.createBox(boxInfo)
    findChildComponents(context?.proxy.$children || [])
  })
  onUnmounted(() => {
    inject.deleteBox(boxInfo)
    inject.unListenerKeyDown(uid.value)
    clearTimeout(timer.value)
  })
  return {
    boxInfo,
    onMoveIn: (ev: () => void) => funs.onMoveIn = ev,
    onMoveOut: (ev: () => void) => funs.onMoveOut = ev,
    onMove: (ev: () => void) => funs.onMove = ev,
  }
}